<template>
  <div class="goodsDetail-box">
    <!-- 头部 -->
    <div class="myhead">
      <header class="header1" v-show="header_flag">
        <ul>
          <li class="left">
            <van-icon name="arrow-left" @click="back()" />
          </li>
          <li class="middle"></li>
          <li class="right">
            <van-popover
              v-model="showPopover"
              theme="dark"
              trigger="click"
              :actions="actions"
              placement="bottom-end"
            >
              <template #reference>
                <van-icon name="ellipsis" />
              </template>
            </van-popover>
          </li>
        </ul>
      </header>
      <header class="header2" v-show="!header_flag">
        <ul>
          <li class="left">
            <van-icon name="arrow-left" @click="back" />
          </li>
          <li class="middle">
            <span>详情</span>
            <span>推荐</span>
          </li>
          <li class="right">
            <van-popover
              v-model="showPopover"
              theme="dark"
              trigger="click"
              :actions="actions"
              placement="bottom-end"
            >
              <template #reference>
                <van-icon name="ellipsis" />
              </template>
            </van-popover>
          </li>
        </ul>
      </header>
    </div>
    <!-- 内容 -->
    <section>
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe @change="onChange">
          <van-swipe-item v-for="(item, index) in banners" :key="index">
            <van-image width="100%" height="23.4375rem" :src="item" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
        <!-- 播放视频 -->
        <div class="video">
          <van-icon name="play-circle-o" style="font-size: 24px" />
          播放视频
        </div>
      </div>
      <!-- 价格 -->
      <div class="proInfo">
        <div class="priceBox">
          <span> ￥{{ detail.originprice }} </span>
          <span> 销量：{{ detail.sales }} </span>
        </div>
        <div class="proName">
          <van-tag type="danger">{{ detail.brand }}</van-tag>
          <van-tag type="primary">{{ detail.category }}</van-tag>
          <span>{{ detail.proname }}</span>
        </div>
      </div>
      <!-- 配送地址 -->
      <div class="address">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="送至"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
      </div>
      <!-- 猜你喜欢 -->
      <div class="recommendBox">
        <h3>猜你喜欢</h3>
        <recommend-list></recommend-list>
      </div>
    </section>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="star-o" text="收藏" @click="onClickIcon" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart(detail.proid)"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from 'vant';
import RecommendList from "../components/RecommendList.vue";

export default {
  name: "GoodsDetail",
  components: {
    RecommendList,
  },
  // 组件内部路由守卫
  // beforeRouteEnter 组件还没被创建,没有this
  // beforeRouteUpdate /foo/:id 组件复用时使用 有this
  // beforeRouteLeave  导航离开组件时调用 有this
  beforeRouteUpdate(to, from, next) {
    this.$http({
      url: "pro/detail/" + to.params.proid,
    }).then((res) => {
      this.detail = res.data.data;
      this.banners = res.data.data.banners[0].split(",");
    });
    next();
  },
  data() {
    return {
      goodsId: this.$route.params.proid,
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "我的", icon: "manager-o" },
        { text: "分享", icon: "share-o" },
      ],
      detail: [],
      comments: [],
      header_flag: true,
      current: 0,
      banners: [],
      show: false,
      fieldValue: "浙江省/杭州市",
      cascaderValue: "330100",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          selected: true,
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  created() {
    this.$http({
      url: "pro/detail/" + this.goodsId,
    }).then((res) => {
      
      this.detail = res.data.data;
      this.banners = res.data.data.banners[0].split(",");
    });
  },
  mounted() {
    window.addEventListener("scroll", this.changeHead, true);
  },
  methods: {
    addCart(proid) {
      Toast('加入购物车成功')
      let token = sessionStorage.getItem("token");
      let userid = sessionStorage.getItem("userid");
      this.$http({
        url: "cart/add",
        method: "post",
        headers: { token },
        data: {
          userid,
          num:1,
          proid
        },
      });
    },
    // 后退
    back() {
      this.$router.go(-1);
      this.goodsId = this.$route.params.proid;
    },
    // 跳转页面

    onClickIcon() {},
    onClickButton() {},
    onChange(index) {
      this.current = index;
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    // 返回顶部
    changeHead() {
      let scrollTop = document.getElementsByTagName("section")[0].scrollTop;

      if (scrollTop > 380) {
        this.header_flag = false;
      } else {
        this.header_flag = true;
      }
    },
  },
};
</script>

<style scoped>
.goodsDetail-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #efefef;
}
.goodsDetail-box section {
  flex: 1;
  overflow: auto;
}
/* 头部 */
.myhead {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
}
header {
  height: 2.75rem;
  padding: 0.375rem 0.9375rem;
}
.myhead .header2 {
  background: white;
}
header ul {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .left i,
.right i {
  width: 2.75rem;
  font-size: 32px;
  vertical-align: middle;
}
header .middle {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 12px;
}
header .middle span {
  flex: 1;
  text-align: center;
}

/* 轮播图 */
.banner {
  position: relative;
}
.van-swipe {
  height: 21.875rem;
  overflow: hidden;
}
/* 分页器 */
.custom-indicator {
  position: absolute;
  bottom: 1.8rem;
  right: 0;
  z-index: 1;
  width: 3.75rem;
  height: 1.5rem;
  background-color: #0003;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
  font-size: 0.875rem;
}

/* 播放视频 */
.video {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
  width: 80px;
  height: 30px;
  background-color: #ffffffb3;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f66;
  border-radius: 15px;
  font-size: 0.75rem;
}
.van-icon {
  font-size: 1.5rem;
}

/* 价格部分 */
.proInfo {
  background-color: #fff;
  padding: 15px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
}
.proInfo .priceBox {
  font-size: 0.75rem;
}
.proInfo .priceBox span {
  line-height: 2rem;
}
.proInfo .priceBox span:nth-child(1) {
  font-size: 24px;
  color: #f66;
}
.proInfo .priceBox span:nth-child(2) {
  float: right;
}

.proInfo .proName {
  font-weight: 700;
  font-size: 0.875rem;
}
.proInfo .proName .van-tag {
  margin-right: 5px;
}
/* 配送地址 */
.address {
  margin-top: 10px;
}

/* 猜你喜欢 */
.recommendBox {
  background: white;
  margin-top: 10px;
}
.recommendBox h3 {
  font-size: 14px;
  padding: 10px 15px;
}
</style>